<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类" prop="pid">
        <el-select v-model="form.pid" placeholder="请选择活动区域">
          <el-option label="顶层分类" :value="0"></el-option>
          <el-option v-for="form in cate" :label="form.name" :value="form.id" :key="form.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="启用状态" prop="onOff">
        <el-switch v-model="form.onOff"></el-switch>
        <el-form-item label="图片分类">
          <el-upload
            class="upload-demo"
            ref="douplod"
            action="/api/Revise"
            name="file"
            :on-success="uplodSuccess"
            :before-remove="beforeUplod"
            :auto-upload="false">
            <div class="uplode">
              <i class="el-icon-upload"></i>
            </div>
            <span >图片上传不能超过1m</span>
            <el-button size="small">选取文件</el-button>
          </el-upload>
          <img width="100px" :src="cate.icon">
          <el-button class="box2" @click="douplod">上传到服务器</el-button>
          <div class="box4">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="Cancel()">取消</el-button>
          </div>
        </el-form-item>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Revise}from '@/api/index'
import { Message } from 'element-ui';

export default {
  name: 'unpdate',
  props:{
    cate:{
      type:Object,
      required:true
    }
  },
  watch:{
    cate:{
      handler(newVal){
        this.cate=newVal
      },
      deep:true
    }
  },

  data(){
    // //自定义验证规则
    // const namecheckAge = (rule, value, callback) => {
    //   if (value!=='小米'){
    //     callback(new Error('不是小米'))
    //   }else {
    //     //验证通过放行
    //     callback()
    //   }
    // }
    // //自定义验证规则
    return {
      form: {
        name: '',
        pid:0,
        onOff: false,
      },
      //表单验证
      rules:{
        name:[
          { required: true, message: '请输入类型', trigger: 'blur' },
          // {patten:/\w{3,5}/,message:'必须三到五位的数字',trigger: 'blur' },//正则验证规则
          // {validator:namecheckAge, trigger: 'blur' }//自定义验证规则
        ],
      }
    }
  },
  methods: {
    Cancel(){
      this.$emit('hideupdate')
    },
    beforeUplod(file){
      // 请求发送之前限制发送大小
      if (file.size>(1024*1024)){
        this.$alert('您不能大于1m', {
            confirmButtonText: '确定',
            callback: () => {
              this.$message({
                type: 'error',
                message: '上传失败'
              });
              return false
            }
          }
        );

      }else {
        return true
      }
    },
    uplodSuccess(res){
      // 提交后拿到的函数
      console.log(11)
      if(res.code===200){
        console.log(res)
        Message({
          message:res.msg,
          type:'success',
        })
        this.form.icon=res.data.url
      }
    },
    douplod(){
      //点击按钮上传文件
      this.$refs.douplod.submit();
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid){
          Revise(this.form).then(res=>{
            // 添加请求
            if (res.data.code===200){
              Message({
                message:res.data.msg,
                type:'success',
                duration:1000,
                onClose:()=>{
                  // 组件通信出发
                  // 抽屉式添加成功关闭
                  this.Cancel()
                  //清空上次表单输入的数据
                  this.$refs.form.resetFields()
                }
              })
            }else {
              Message({
                  message:res.data.msg,
                type:'error',
                duration:1000,
                onClose:()=>{
                  // 抽屉式添加失败关闭
                  this.Cancel()
                }
              })
            }
          })
        } else {
          return false
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">
.uplode{
  width: 300px;
  height: 120px;
  border: 1px solid #6666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  i{
    font-size: 50px;
  }

}
.el-upload-list__item-name{
  position: relative;
  top: 20px;
}
.box2{
  margin-left: 84px;
  margin-top: 20px;
}
.box4{
  margin-left: 54px;
  margin-top: 20px;
}

</style>
